<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="canvasPaint.js" type="text/javascript"></script>
	<script type="text/javascript" src="canvas2image.js"></script>
    <script type="text/javascript" src="base64.js"></script>
    <script type="text/javascript" src="to64.js"></script>
    <script type="text/javascript">
	color="#000";
	heit=4;
	wit=4;
	var clase= "";
	var figura;
	var hor1; 
	var ver1;
	var alt=0;
	var anch=0;
	
	// control para suavizar forma
	var control=0;
	var suavizar = 4;
	
	////
	var cadenaCoord="";	
	var canvas;
	
	function inici(){
		canvas = document.getElementById("oCanvas");
		//Event per a quan es clica sobre el document
		 canvas.addEventListener('mousedown',click,false);
		 //Event per a quan es lleva el dit del ratolí
		 canvas.addEventListener('mouseup',parar,false);
		}
		
	 function parar(e){
	 //Eliminem els events que estan operant per a poder utilitzar uns altres.
	 	anch=0;// punto 1, x
		alt=0; // punto 1, y
		canvas.removeEventListener('mousemove',pintar,false);
		canvas.removeEventListener('mousemove',click,false);
		// cuando se suelte en raton, unir puntos q se diferencien del grosor para
		
	 }
	 
	function click(e){
		//anulem tot tipus d'events per defecte
		e.preventDefault();
		//pintar(e);
		//crida aquesta funció per a anar dibuixant a cada moviment del punter
		canvas.addEventListener('mousemove',pintar,false);		 
	}
	
	function pintar(e){
		
		// separar la interpolación de suavizar de la q se muestra
		
		if (control==suavizar){	 // lo que guarda suavizado
			var hor= e.clientX -10; // valor undefined
			var ver=e.clientY -10;
			//vector(hor,ver);
				if(alt!=0 && anch!=0){
							var xabs = Math.abs (anch - hor);
							var yabs = Math.abs(alt - ver);
							var xdiff = hor - anch;
							var ydiff = ver - alt;
							
							var length = Math.sqrt((Math.pow(xabs, 2) + Math.pow(yabs,2)));
							var steps = length;
							var xstep= xdiff /steps;
							var ystep = ydiff / steps;
						
							var newx = 0;
							var newy = 0;
							
							for (s=0; s<steps; s++){
								newx = anch + (xstep*s);
								newy = alt + (ystep*s);
							
									nodeImagen=document.createElement("div");
									nodeImagen.style.backgroundColor= color;
									nodeImagen.style.height= heit+"px";
									nodeImagen.style.width= wit+"px";
									nodeImagen.style.position= "absolute";
									nodeImagen.style.marginTop= newy+"px";
									nodeImagen.style.marginLeft= newx+"px";
									nodeImagen.setAttribute("class",clase);
									canvas.appendChild(nodeImagen);
									vector(Math.round(newy),Math.round(newx));
							}
							//
						}
				anch=hor;
				alt=ver;
				//reiniciaizar a 0
				control=0;
		}else{
			control++;
		}
	}

	function vector (x,y){		
		cadenaCoord+= x+","+y+";";	
	}
	
		function envia(){
			//alert (cadenaCoord);
			if(window.XMLHttpRequest) {    
				peticion_http = new XMLHttpRequest();  
			 }  else if(window.ActiveXObject) {    
				peticion_http = new ActiveXObject("Microsoft.XMLHTTP");  
			 }   // Preparar la funcion de respuesta  
			  peticion_http.onreadystatechange = enviaImatge; 
			  // Realizar peticion HTTP  
			 peticion_http.open('POST', 'http://localhost:8080/Creacion_ServletPreguntaPinta/', true); 
			 peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			//alert(this.canvas.background.context);
			//var cad = Canvas2Image.saveAsBMP(canvas.background.canvas, true); 

			//alert(cad);

			//var cad64= toBase64(cad);
			//var cad64= toBase64(cadenaCoord);
			//peticion_http.send("imatge2="+cad64);
			peticion_http.send("imatge2="+cadenaCoord);
			
		}
		
		function enviaImatge(){
			
			if(peticion_http.readyState == 4) {      
					if(peticion_http.status == 200) {  
						//alert("Hola");
						//document.getElementById("contingut").innerHTML=peticion_http.responseXML;
					}
			}
		}

    </script>
	<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body onLoad= "inici()">
	<div class="toolsBars">
	</div>
    <div id="oCanvas" style="width: 100px; height: 100px; border: solid 2px red" class="canvas"></div>
    <div id="texto" > </div>
    <button onClick="envia()">Enviar</button>
</body>
</html>
